<template>
	<view>
		<view class="searchBox">
			<input class="seaInp" type="text" v-model="seaName" placeholder="请输入项目类型">
			<view class="seaBut" @click="toSearch()">搜索</view>
		</view>
		<view class="history" v-if="lists.length == 0">
			<view class="historySeach">历史搜索</view>
			<view class="historyName">
				<view v-for="(item,index) in stor" :key="index" @click="belong(item.name)">{{item.name}}</view>
			</view>
		</view>
		<view class="item_list" v-else>
			<view class="list" @click="goteam(item.id)" v-for="(item,index) in lists" :key="index">
				<view class="list_top" v-if="user.group_id == 2">
					<view class="renzheng flex align">
						<image class="identIcon"  v-if="item.user.is_verify == 0" src="../../static/icon/icon/my/renzheng.png" mode="aspectFill"></image>
						<image class="identIcon" v-if="item.user.is_verify == 1" src="../../static/icon/icon/home/renzheng.png" mode="aspectFill">
						</image>
						<text class="no-z" v-if="item.user.is_verify == 0">未认证</text>
						<text v-if="item.user.is_verify == 1">已认证</text>
					</view>
					
					<view class="ipone">
						<image src="../../static/icon/tel.png" mode="widthFix"></image>
					</view>
					<image :src="item.user.avatar" mode="widthFix"></image>
					<view class="list_title">
						<view class="title_name">
							{{item.user.encoded}}
						</view>
					</view>
				</view>
				<view class="list_bottom" v-if="user.group_id == 2">
					<view class="bottom_list">
						<view class="bottom_lists blue" v-for="(items,index) in item.troops_arr">
							{{items}}
						</view>
						<view class="bottom_lists" v-for="(items,index) in item.work_arr">
							{{items}}
						</view>
					</view>
					<view class="bottom_content">
						{{item.introduce}}
					</view>
				</view>
				<view class="search-project" v-if="user.group_id == 3">
					<view class="title">
						{{item.introduce}}
					</view>
					<view class="flex justify align">
						<view class="troops">
							需求：
							<text class="troops_arr" v-for="(i,index) in item.troops_arr">
								{{i}} 
								<template v-if="index != item.troops_arr.length"></template>
							</text>
							<text class="work_arr" v-for="(i,index) in item.work_arr"> | {{i}}</text>
						</view>
						<view class="" @tap.stop="toCall(item.phone)">
							<image class="tel_icon" src="../../static/icon/tel.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="time flex justify align">
						<view class="title_name">
							{{timestampToTime(item.createtime)}} 发布
						</view>
						<view class="title_dizhi flex align">
							<image src="../../static/icon/addr.png" mode="aspectFill"></image>
							<text>{{item.province}}</text>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				user:null,
				seaName: '',
				stor: [],
				beforeId: '',
				beforeName: '',
				lists: [],
				total:0,
				page:1,
			}
		},
		onLoad() {
			const _this = this
			if (app.globalData.user) {
				_this.user = app.globalData.user
				_this.page = 1
				_this.total = 0
				_this.lists = []
				_this.search()
			} else {
				app.flagLogin().then(() => {
					console.log('回调2---------------', app.globalData.user)
					_this.user = app.globalData.user
					console.log(_this.user, '---------------------------------------------------')
					_this.page = 1
					_this.total = 0
					_this.lists = []
					_this.search()
				})
			}
		},
		onShow() {
				var newStor = []
				// // 获取storage中的值
				uni.getStorage({
					key: 'sea_key',
					success(res) {
						console.log(res.data, '这是刷新页面获取的最新缓存值')
						var resData = res.data
						resData.forEach(function(item) {
							newStor.push(item)
						})
					}
				})
				console.log(newStor, '以获取')
				this.stor = newStor
		},
		methods: {
			timestampToTime(timestamp) {
				timestamp = timestamp ? timestamp : null;
				let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear();
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return M + '月' + D + '日'
				// console.log(Y + M + D + h + m + s)
			},
			// 拨打电话
			toCall(tel){
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
			goteam(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/TeamDetails/TeamDetails?id=' + id
				})
			},
			toSearch(){
				this.page = 1
				this.total = 0
				this.lists = []
				this.search()
			},
			search() {
				// 创建新数组
				let keys = []
				// 获取storage里的值
				var keyPrice = uni.getStorageSync('sea_key')
				// keys.push(this.seaName)
				console.log(keyPrice, '这是缓存的值')
				// 分割线=======================================================================================
				// 获取ad_id
				let url = this.user.group_id == 3?'/addons/shopro/project/index':'addons/shopro/visiting_card/index'
				let data = {
					"page": this.page,
					"num": 5,
					"order_by": 'new',
					"keywords": this.seaName
				}
				app.getData(url, data).then(res => {
					console.log(res.data.data)
					var _this = this
					this.lists = [...this.lists,...res.data.data.data]
					this.total = res.data.data.total
					// var listName = res.data.data.data
					// listName.forEach(function(item) {
					// 	console.log(item)
					// 	if (_this.seaName == item.ad_name) {
					// 		_this.beforeId = item.id
					// 		_this.beforeName = item.ad_name
					// 		console.log(_this.beforeId, '111111', _this.beforeName)
					// 	}
					// })
					// let value = {
					// 	ad_id: this.beforeId,
					// 	name: this.seaName
					// }
					// keys.push(value)
					
				})

				// 分割线=======================================================================================

			},
			// 历史搜索点击 
			belong(id) {
				console.log(id)
				uni.redirectTo({
					url: '/pages/recommend/recommend?id=' + id
				})
			}
		},
		onReachBottom() {
			console.log('上拉')
			if (this.page * 5 <= this.total) {
				this.page = this.page + 1
				this.search()
			} else {
				uni.showToast({
					title: '没有更多了'
				})
			}
		},
	}
</script>

<style lang="scss">
	.shaixuan {
		display: flex;
		padding: 0rpx 40rpx;
		justify-content: space-between;
		font-size: 20rpx;

		view {
			display: flex;
			justify-content: space-between;

			view {
				// margin: 10rpx;
				padding: 10rpx 20rpx;
			}

			.click {
				background-color: #fff;
				color: dodgerblue;
				font-weight: 500;
			}
		}
	}

	.item_list {
		padding: 20rpx;

		.list {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			position: relative;

			.renzheng {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				color: #ffaa00;
				font-size: 20rpx;
				.identIcon{
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
				.no-z{
					color: #333;
				}
			}

			.ipone {
				position: absolute;
				right: 20rpx;
				top: 50%;
				margin-top: -60rpx;

				image {
					width: 60rpx !important;
					margin: 0 !important;
				}

			}

			.list_top {
				display: flex;
				justify-content: flex-start;

				image {
					width: 100rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.list_title {
					.title_name {
						font-size: 28rpx;
						font-weight: bold;
					}

					.title_dizhi {
						font-size: 24rpx;
						color: #333;
						margin-top: 18rpx;
						margin-left: 20rpx;
					}
				}
			}

			.list_bottom {
				.bottom_list {
					display: flex;
					justify-content: flex-start;
					margin: 20rpx 0;
					flex-wrap: wrap;
					.bottom_lists {
						margin-right: 12rpx;
						font-size: 20rpx;
						text-align: center;
						padding: 4rpx 10rpx;
						background-color: #dedede;
					}
					.blue{
						color: var(--base);
						background-color: #E5F4FF;
						font-weight: 600;
					}
				}

				.bottom_content {
					font-size: 22rpx;
					color: #333;
					font-weight: 500;
				}
			}





		}
	}

	.searchBox {
		width: 680rpx;
		height: 60rpx;
		border: 1rpx solid var(--base);
		border-radius: 50rpx;
		margin: 10rpx 20rpx;
		padding: 4rpx 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.seaInp {
		width: 70%;
		margin: 0 0 0 20rpx;
	}

	.seaBut {
		width: 150rpx;
		line-height: 56rpx;
		text-align: center;
		background-color: var(--base);
		color: #fff;
		font-weight: bold;
		border-radius: 30rpx;
	}

	.history {
		margin: 20rpx 0 20rpx 20rpx;
	}

	.historySeach {
		font-size: 30rpx;
		font-weight: bold;
	}

	.historyName {
		width: 680rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-flow: wrap;
	}

	.historyName view {
		margin: 10rpx 10rpx 0 0;
		padding: 10rpx 30rpx;
		font-size: 20rpx;
		background-color: #F2F2F2;
		border-radius: 10rpx;
	}
	.search-project{
		.title{
			font-size: 30rpx;
			color: #000;
			margin-bottom: 30rpx;
		}
		.troops{
			color: #888;
			width: 88%;
			margin-bottom: 20rpx;
		}
		.tel_icon{
			width: 60rpx;
			height: 60rpx;
		}
		.troops_arr{
			color: var(--base);
		}
		.work_arr{
			padding-left: 10rpx;
		}
		.title_dizhi{
			image{
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}
		.time{
			color: #999;
			font-size: 24rpx;
		}
	}
</style>
